<script setup>
	const props = defineProps({
		swipeData: {
			type: Array,
			default: () => [],
		},
	})

	// 对数据进行转换
	const swipeGroup = {}

	// // 遍历出:key val 思路一
	for (const item of props.swipeData) {
		swipeGroup[item.enumPictureCategory] = []
	}

	for (const item of props.swipeData) {
		const valueArray = swipeGroup[item.enumPictureCategory]
		valueArray.push(item)
	}

	// 思路二:
	// for (const item of props.swipeData) {
	// 	let valueArray = swipeGroup[item.enumPictureCategory]
	// 	if (!valueArray) {
	// 		valueArray = []
	// 		swipeGroup[item.enumPictureCategory] = valueArray
	// 	}
	// 	valueArray.push(item)
	// }

	// 定义转换数据的方法
	// 3.正则转换
	const nameReg = /【(.*)】/i
	const getName = (name) => {
		// 1.单个转换
		// return name.replace('：', '')
		// 2.多个转换
		// return name.replace('【', '').replace('】', '').replace('：', '')
		// 3.正则转换
		const results = nameReg.exec(name)
		return results[1]
	}

	const getCategoryIndex = (item) => {
		const valueArray = swipeGroup[item.enumPictureCategory]
		return valueArray.findIndex((data) => data === item) + 1
	}
</script>

<template>
	<div class="detail-swipe">
		<van-swipe
			class="swipe-list"
			:autoplay="3000"
			indicator-color="white">
			<template
				v-for="(item, index) in swipeData"
				:key="index">
				<van-swipe-item class="item">
					<img
						:src="item.url"
						alt="" />
				</van-swipe-item>
			</template>

			<template #indicator="{ active, total }">
				<div class="indicator">
					<template
						v-for="(value, key, index) in swipeGroup"
						:key="key">
						<span
							class="item"
							:class="{
								active: swipeData[active]?.enumPictureCategory == key,
							}">
							<span class="text">{{ getName(value[0].title) }}</span>
							<span
								class="count"
								v-if="swipeData[active]?.enumPictureCategory == key">
								{{ getCategoryIndex(swipeData[active]) }}/{{ value.length }}
							</span>
						</span>
					</template>
				</div>
			</template>
		</van-swipe>
	</div>
</template>

<style lang="scss" scoped>
	.detail-swipe {
		position: relative;

		.swipe-list {
			.item {
				img {
					width: 100%;
				}
			}

			.indicator {
				position: absolute;
				right: 5px;
				bottom: 5px;
				padding: 2px 5px;
				font-size: 12px;
				color: #fff;
				background: rgba(0, 0, 0, 0.8);
				.item {
					margin: 0 3px;
					&.active {
						padding: 0 3px;
						border-radius: 3px;
						background-color: #fff;
						color: #000;
					}
				}
			}
		}
	}
</style>
